<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jq/jquery-1.12.4.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }


        nav {
            width: 700px;
            height: 50px;
            background-color: #333;
            margin: 0 auto;
            overflow: hidden;
        }


        nav ul {
            display: flex;
        }


        nav li {
            width: 100px;
            height: 50px;
            color: #fff;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }


        nav li i {
            width: 100px;
            height: 50px;
            background-color: palegreen;
            position: absolute;
            top: 50px;
            left: 0;
        }


        nav li span {
            position: relative;
            z-index: 1;
        }


        .box {
            display: flex;
            justify-content: center;
        }


        .box img {
            width: 700px;
        }
    </style>
    <script>
        $(function () {
            // 先拿到li和audio
            $('li').mouseover(function () {
                let index = $(this).index()
                // 重新加载事件
                $('audio').get(index).load();
                $('audio').get(index).play();
                // console.log($(this));
                $(this).children('i').stop().animate({ top: 0 })
                // $('')
            }).mouseout(function () {
                // $('audio').get(index).load();
                $(this).children('i').stop().animate({ top: 50 })
            })
        })
        // 键盘按下事件keydown
        $(window).on('keydown', function (e) {
            // 取49-55
            if (e.keyCode >= 49 && e.keyCode <= 55) {
                let index = e.keyCode - 49
                // li的下标index的后代i
                $('li').eq(index).find('i').animate({ top: 0 })
                $('audio').get(index).load();
                $('audio').get(index).play();
            }
        }).on('keyup', function (e) {
            // console.log(1);
            let index = e.keyCode - 49
            // li的下标index的后代i
            $('li').eq(index).find('i').animate({ top: 50 })

        })
    </script>
</head>

<body>
    <nav>
        <ul>
            <li> <span>导航1</span> <i></i> </li>
            <li> <span>导航2</span> <i></i> </li>
            <li> <span>导航3</span> <i></i> </li>
            <li> <span>导航4</span> <i></i> </li>
            <li> <span>导航5</span> <i></i> </li>
            <li> <span>导航6</span> <i></i> </li>
            <li> <span>导航7</span> <i></i> </li>
        </ul>
    </nav>
    <div class="box">
        <img src="../image/musice3.jpg" alt="">
    </div>
    <!-- 音频标签准备 -->
    <audio src="../MP3/1.mp3"></audio>
    <audio src="../MP3/2.mp3"></audio>
    <audio src="../MP3/3.mp3"></audio>
    <audio src="../MP3/4.mp3"></audio>
    <audio src="../MP3/5.mp3"></audio>
    <audio src="../MP3/6.mp3"></audio>
    <audio src="../MP3/7.mp3"></audio>
</body>

</html>